<form id="searchForm">
<fieldset id="searchArea">
<table>
<tr>
<td>
<div id="searchBox" style="border:2px;padding:3px;background:grey;width:350px;">
	<table>
		<tr>
			<td>
				<select id="Search1" name="Search1">
				  <option value="Distance">Distance</option>
				  <option value="Rating">Rating</option>
				  <option value="Price">Price</option>
				</select>
			</td>
			<td>
				<select id="Operator1" name="Operator1">
				  <option value="&lt;">&lt;</option>
				  <option value="&gt;">&gt;</option>
				  <option value="==">==</option>
				</select>
			</td>
			<td><input id="value1" name="value1" value="" type="text"/> </td>
		</tr>
	</table>
</div>
</td>
<td>
<div id="searchBox2" style="border:2px;padding:3px;background:grey;width:350px;">
	<table>
		<tr>
			<td>
				<select id="Search2" name="Search2">
				  <option value="Distance">Distance</option>
				  <option value="Rating">Rating</option>
				  <option value="Price">Price</option>
				</select>
			</td>
			<td>
				<select id="Operator2" name="Operator2">
				  <option value="&lt;">&lt;</option>
				  <option value="&gt;">&gt;</option>
				  <option value="==">==</option>
				</select>
			</td>
			<td><input id="value2" name="value2" value="" type="text"/> </td>
		</tr>
	</table>
</div>
</td>
<td>
	<input id="" type="button" value="Search" onclick="alert($('#searchForm').serialize());"/> 
</td>
</tr>
<tr>
<td><div id="section_navigator"></div></td>
</tr>
</table>
</fieldset>
</form>

<div id="scheduler_minical"></div>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
	<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			
			<!--  
			<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>
			-->
			
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>

			<div class="dhx_cal_tab" name="map_tab" style="right:344px;"></div>
			<div class="dhx_cal_tab" name="unit_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>

		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>


<script type="text/javascript" charset="utf-8">
	function show_minical(){
		var calendar;
	    if (scheduler.isCalendarVisible())
	       scheduler.destroyCalendar();
	    else{
	    	calendar = scheduler.renderCalendar({
	          position:"dhx_minical_icon",
	          date:scheduler._date,
	          navigation:true,
	          handler:function(date,calendar){
	             scheduler.setCurrentView(date);
	             scheduler.destroyCalendar()
	          }
	       });
			scheduler.linkCalendar(calendar); 
	    }
		//after next command, mini calendar will always show and mark currently visible date range in scheduler

		 
		//next command will change date of mini-calendar without destroying existing html objects 
		//so it will preserve all handlers and styles
		//scheduler.updateCalendar(calendar, new Date(2009,5,30)); 
	 }

	function resizeFrame() 
	{
	    var h = $(window).height();
	    var w = $(window).width();
 //	    $("#scheduler_here").css('height',(h < 1024 || w < 768) ? 500 : 400);
	    $("#scheduler_here").css('height',(h - 330));
	    $("#scheduler_here").css('width',(w - 350));
	}

	function init() {
		resizeFrame();
		$.event.add(window, "load", resizeFrame);
		$.event.add(window, "resize", resizeFrame);
		
		var sections=[
		  			{key:"Doctor A", label:"Doctor A"},
		  			{key:"Doctor B", label:"Doctor B"},
		  			{key:"Doctor C", label:"Doctor C"},
		  			{key:"Doctor D", label:"Doctor D"}
		  		];

				scheduler.locale.labels.new_event = "Book an Appointment"
		  		scheduler.locale.labels.unit_tab = "Doctors"
		  		scheduler.locale.labels.section_custom="Doctors";
		  		scheduler.config.details_on_create=true;
		  		scheduler.config.details_on_dblclick=true;
		  		scheduler.config.xml_date="%Y-%m-%d %H:%i";
				scheduler.config.prevent_cache = true;

				scheduler.locale.labels.map_tab = "Map";
				scheduler.locale.labels.section_location = "Location";
				
				scheduler.xy.map_date_width = 180; // date column width
				scheduler.xy.map_description_width = 400; // description column width
				scheduler.config.map_inital_zoom = 8;


				// updating dates to display on before view change
	            scheduler.attachEvent("onBeforeViewChange", function(old_mode, old_date, new_mode, new_date) {
	                scheduler.config.map_start = scheduler.date.month_start(new Date((new_date||old_date).valueOf()));
	                scheduler.config.map_end = scheduler.date.add(scheduler.config.map_start, 1, "month");
	                return true;
	            });

	            // defining add function for prev/next arrows
	            scheduler.date.add_map = function(date, inc) {
	                return scheduler.date.add(date, inc, "month");
	            };

	            // defining date header 
	            // var format = scheduler.date.date_to_str("%Y-%m-%d");
	            //scheduler.templates.map_date = function(start, end, mode){
	            //    return format(start)+" "+format(end);
	            // };
					
		        //top label of calendar
	            scheduler.templates.calendar_month =  scheduler.date.date_to_str("%F %Y");
	            //week label of calendar
	            scheduler.templates.calendar_scale_date =  scheduler.date.date_to_str("%D");

	            /*
	            scheduler.date.calendar_start = function(date){
	            	date.setDate(1);
	        		return date;
	    		};

	    		scheduler.date.calendar_end= function(date) {
	    			var ndate=new Date(date.valueOf());
	    			ndate.setMonth(ndate.getMonth()+1);
	    			ndate.setDate(0);
	    			ndate.setDate(ndate.getDate()+-1);
	    			return ndate;
	    		};
	    		
	    		scheduler.date.add_calendar = function(date,inc,mode){
	    			var ndate=new Date(date.valueOf());
	    			ndate.setMonth(ndate.getMonth()+inc);
	    			return ndate;
		    	}
				*/
	    		  		
		  		scheduler.config.lightbox.sections=[	
		  			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
		  			{ name:"location", height:43, map_to:"event_location", type:"textarea"  },
		  			{name:"custom", height:23, type:"select", options:sections, map_to:"resource_id" },
		  			{name:"time", height:72, type:"calendar_time", map_to:"auto"}
		  		]
		  		
		  		scheduler.createUnitsView({
		  			name:"unit",
		  			property:"resource_id",
		  			list:sections
		  		});
		  		scheduler.config.multi_day = true;


		  		//...
		  		//remove mini calendar
		  		//scheduler.destroyCalendar(calendar);
		  		
		  		scheduler.init('scheduler_here',new Date(2009,5,30),"map");
		  		scheduler.load("services/scheduler/events/list?schedulerId=testing&clientName=2012551348141&mediUser=admin&mediPass=151cd0519315&identifier=2012551348141");

				//scheduler.init('scheduler_here',new Date(2009,10,1),"month");
				//scheduler.setLoadMode("month")
				// scheduler.load("php/events.php");
				
				var dp = new dataProcessor("services/scheduler/events/action?schedulerId=testing&clientName=2012551348141&mediUser=admin&mediPass=151cd0519315&identifier=2012551348141");
				dp.init(scheduler);
		  		
	}

	init();
</script>